<!--
  Copyright 2012-2019 the original author or authors.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<div class="card">
  <div class="card-header">
    <h2>Alerts</h2>
  </div>
  <div class="card-body">
    <div ng-hide="hideMainContent()">
      <div ng-include src="'template/gt-loading-overlay.html'"></div>
      <div ng-include src="'template/gt-http-error-overlay.html'"></div>
      <div ng-if="disabledForNextMillis && !layout.offlineViewer"
           class="alert alert-danger"
           role="alert"
           style="margin: 0 15px 30px;">
        Alerting is disabled for the next {{disabledForNextMillis | gtDuration}}.
      </div>
      <div style="margin: 15px;">
        <div ng-if="!alerts.length"
             style="font-style: italic;">
          There are no configured alerts
        </div>
        <div ng-repeat="alert in alerts"
             class="gt-second-line-indent"
             style="padding-bottom: 8px;">
          <a ng-href="config/alert{{alertQueryString(alert)}}">
            {{alert.display}}
          </a>
        </div>
        <!-- ng-if="loaded" is used to prevent jitter of seeing this section very briefly
             before it gets pushed down by existing alerts -->
        <div ng-if="loaded && agentRollup.permissions.config.edit.alerts"
             style="margin-top: 30px;">
          <div gt-button-group>
            <a class="btn btn-primary gt-button-spacing"
               href="config/alert{{newQueryString()}}">
              Add new
            </a>
            <button ng-click="displayDisableAlertingModal()"
                    ng-if="!disabledForNextMillis && !layout.offlineViewer"
                    class="btn btn-secondary gt-button-spacing">
              Temporarily disable alerting
            </button>
            <div gt-button
                 gt-btn-class="btn-secondary"
                 gt-label="Re-enable alerting"
                 gt-click="reEnableAlerting(deferred)"
                 ng-if="disabledForNextMillis && !layout.offlineViewer"
                 class="d-inline-block">
            </div>
            <button ng-click="changeAlertingDisabledTimeModal()"
                    ng-if="disabledForNextMillis && !layout.offlineViewer"
                    class="btn btn-secondary gt-button-spacing">
              Change alerting disabled time
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal" id="disableAlertingModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered"
       style="max-width: 500px;">
    <div class="modal-content">
      <div ng-form
           gt-form-with-primary-button>
        <div class="modal-header">
          <h3 ng-if="changeAlertingDisabledTime">Change alerting disabled time</h3>
          <h3 ng-if="!changeAlertingDisabledTime">Temporarily disable alerting</h3>
        </div>
        <div class="modal-body">
          <div class="container">
            <div class="form-group">
              <label class="col-form-label pb-3"
                     for="forNext">
                How long do you want alerting to be disabled
                {{changeAlertingDisabledTime ? '(starting from now)' : ''}}?
              </label>
              <div class="input-group">
                <input type="text"
                       class="form-control"
                       ng-model="page.disableForNext"
                       ng-pattern="pattern.integer"
                       name="forNext"
                       id="forNext"
                       style="max-width: 7em;">
                <div gt-input-group-dropdown
                     gt-model="page.disableForNextUnit"
                     gt-items="disableForNextUnits"
                     class="input-group-append">
                </div>
              </div>
              <div class="help-block pt-3">
                NOTE: you can re-enable manually at any time.
              </div>
            </div>
            <div style="min-height: 60px;">
              <div class="d-inline-block">
                <div gt-spinner
                     gt-show="disablingAlerting"
                     class="gt-left-aligned-spinner"
                     style="width: 50px; margin-bottom: -30px;">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary" ng-click="disableAlerting()" ng-if="changeAlertingDisabledTime">
            Change alerting disabled time
          </button>
          <button class="btn btn-primary" ng-click="disableAlerting()" ng-if="!changeAlertingDisabledTime">
            Temporarily disable alerting
          </button>
          <button class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>
